/**
 * @author:linjiye
 * @date: 2024/12/25
 * @desc:
 **/

import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import {FcView} from "@/components/FcView";
import PageFormBtn from "@/components/PageFormBtn";
import TabCard from "@/components/TabCard";
import FormTitle from "@/components/FormTitle";
import FcButton from "@/components/FcButton";
import {aiOriginalityData,aiInnovationData} from "@/utils/data"
import {Flex} from "@ant-design/react-native";
import RequiredIcon from "@/components/RequiredIcon";
import {LinearGradient} from "expo-linear-gradient";
import Slider from '@react-native-community/slider';
import FcSlider from "@/components/FcSlider";
import FcModal from '../FcModal';
import {router} from "expo-router";
import NoData from '../NoData';
import Loading from "@/components/Loading";
import {
    useGetGroupTemplateListQuery,
    useGetItemListQuery,
    useGetParentListQuery,
    useProfitModelInfoMutation
} from "@/store/api/aiOriginality/aiOriginalityApi";
import {useDispatch, useSelector} from "react-redux";
import {set_params} from "@/store/reducer/aiInnovation/aiInnovationSlice";
import {useDownloadFromUrlMutation, useRecognizeMutation} from "@/store/api/aiInnovation/aiInnovationApi";
import useApiOfSSE from "@/hooks/useApiOfSSE";
import * as ImagePicker from "expo-image-picker";
import {useOssAccessInfoQuery} from "@/store/api/oss/ossApi";
// import Video from "react-native-video";
import FcSearch from "@/components/FcSearch";

type Props = {}

const aiInnovationWrap = ({isVideoBtn=false,vData}: Props) => {
    const [typeList, setTypeList] = useState([
        {
            name: '提供产品',
            id: 1,
        }, {
            name: '提供服务',
            id: 2
        }
    ])
    const [textTypeList, setTextTypeList] = useState([
        {
            name: '引流型',
            id: 1,
        }, {
            name: '广告型',
            id: 2
        }
    ])
    const [banBenTypeList, setBanBenTypeList] = useState([
        {
            name: '智能版',
            id: 1,
        }, {
            name: '自定义',
            id: 2
        }
    ])
    const [zdyList,setZdyList] = useState(aiInnovationData)
    const [selectedItems, setSelectedItems] = useState([]);

    const [textTypeId,setTextTypeId] = useState<number>(-1)
    const [banBenTypeId,setBanBenTypeId] = useState<number>(1)
    const [typeId, setTypeId] = useState(typeList[0]?.id)
    const [productGroup, setProductGroup] = useState('全部')
    const [productName, setProductName] = useState('')
    const [productYL, setProductYL] = useState('')
    const [productGroupItem, setProductGroupItem] = useState({})
    const [productNameItem, setProductNameItem] = useState({})
    const [ylItem, setYlItem] = useState('')
    const [list, setList] = useState(aiOriginalityData)
    const [bigMenuId, setBigMenuId] = useState(list[0]?.id)
    const [smallMenu, setSmallMenu] = useState([])
    const [smallMenuId, setSmallMenuId] = useState(0)
    const [FcSliderZSVal, setFcSliderZSVal] = useState(100)
    const [FcSliderPSVal, setFcSliderPSVal] = useState(1)
    const [openProductGroup, setOpenProductGroup] = useState(false)
    const [openProduct, setOpenProduct] = useState(false)
    const [openProductYL, setOpenProductYL] = useState(false)
    const [groupList, setGroupList] = useState([])
    const [productList, setProductList] = useState([])
    const [ylList, setYlList] = useState([])
    const [pressedIndex, setPressedIndex] = useState(-1);
    const [bwText, setBwText] = useState('')
    const [isGetVideoLink, setIsGetVideoLink] = useState<boolean>(false)
    const [colors,setColors] = useState(['rgba(51,77,176,1)', 'rgba(198,94,253,1)'])
    const [videoLink,setVideoLink] = useState('')
    const [fileUrl,setFileUrl] = useState('')
    const [remember, setRemember] = useState(false)
    const [isLoading, setIsLoading] = useState(false)
    const [videoData,setVideoData] = useState<any>({})
    const [title,setTitle] = useState('')

    const [groupSearchText, setGroupSearchText] = useState('')
    const [productSearchText, setProductSearchText] = useState('')


    const {data:textTypeData,isSuccess:textTypeSuccess} = useGetGroupTemplateListQuery?.({
        promptCate: 1
    })

    const {data:groupResData,isSuccess:groupSuccess, refetch:groupRefetch}= useGetParentListQuery?.({
        type: typeId,
        name: groupSearchText
    })
    const {data:productResData,isSuccess:productSuccess, refetch:productRefetch}= useGetItemListQuery?.({
        parentId: productGroupItem?.id,
        name: productSearchText
    })
    const [profitModelInfoFun] = useProfitModelInfoMutation?.()

    const [downloadFromUrlFun] = useDownloadFromUrlMutation?.({
        url: videoLink
    })
    const [recognizeFun] = useRecognizeMutation?.()

    const [params,setParams] = useState({
        // articlesNum: 1,
        // wordsNum: 100,
        // templateId: '',
        // stream: true,
        // text: '',
    })

    const dispatch = useDispatch()
    let p = useSelector(state => state.aiInnovation.params)

    const {data:ossInfo,refetch:ossRefetch} = useOssAccessInfoQuery({
        fileUrl: fileUrl,
    })

    useEffect(() => {
        setVideoData(vData)
        setBwText(vData?.text)
        dispatch(set_params({
            ...params,
            text: vData?.text
        }))
        if(vData?.title?.length > 0) {
            if(vData?.title?.length > 20) {
                setTitle(vData?.title?.substring(0,20) + '...')
            } else {
                setTitle(vData?.title)
            }
        }
    }, [vData]);

    useEffect(() => {
        if(textTypeData) {
            setTextTypeList(textTypeData.result || [])
            // setBanBenTypeList(textTypeData?.result[0]?.list || [])
            setTextTypeId(textTypeData?.result[0]?.label)
            setZdyList(textTypeData?.result[0]?.list || [])
            let id = textTypeData?.result[0]?.list[0]?.id
            setSelectedItems([id])

            dispatch(set_params({
                ...params,
                templateId: id?.toString()
            }))
        }

    },[textTypeData,textTypeSuccess])
    useEffect(() => {
        if(p) setParams(p)

        handleBigMenu(list[0])

        if (groupSuccess) {
            setGroupList(groupResData.result || [])
            // setProductGroupItem(groupResData.result[0])
            // productRefetch()
        }
        if (productSuccess) {
            setProductList(productResData.result || [])
            // setProductNameItem(productResData.result[0])
            // getProfitModelInfoFun(productResData.result[0].id)
        }

    },[groupSuccess,groupResData,productSuccess,productResData,p])

    useEffect(() => {

        if(ossInfo){
            // setImgUrl(ossInfo.fileUrl)
            console.log(ossInfo,'ossInfo===');

            if(ossInfo.fileUrl){
                setVideoLink(ossInfo.fileUrl)
                handleVideoLink(ossInfo.fileUrl)
            }

        }

    },[ossInfo])

    const handleVideoLink = (url) => {
        console.log(url);
        setIsGetVideoLink(false)
        setIsLoading(true)
        downloadFromUrlFun({            url: videoLink || url,
        }).then(res => {
            if(res?.data?.code === 200) {
                // setVideoLink(res?.data?.result)
                // setIsGetVideoLink(true)
                let file = res.data?.result || ''
                recognizeFun({
                    file: file.replace('\\','%5c')
                }).then(r => {
                    let d = r?.error?.data
                    let s = d?.split('","status":"success"}')[0]?.replace('data:{"text":"','')
                    setBwText(s)
                    dispatch(set_params({
                        ...params,
                        text: s
                    }))
                    setIsLoading(false)
                })
            }
        })
    }

    const getProfitModelInfoFun = (id) => {
        profitModelInfoFun({
            id
        }).then(res => {
            if (res?.data?.code === 200) {
                setYlList(res?.data?.result || [])
            }
        })
    }

    const handleProduct = (val) => {
        setTypeId(val.id)
    }


    const handleBigMenu = (val) => {
        setBigMenuId(val.id)
        setSmallMenu(val.list)
        setSmallMenuId(val.list[0]?.id)
    }

    const handleSmallMenu = (val) => {
        setSmallMenuId(val.id)
    }

    const handleHotKeyword = () => {

    }

    const handleFcZSSlider = (val) => {
        setFcSliderZSVal(val)

        dispatch(set_params({
            ...params,
            wordsNum: FcSliderZSVal
        }))
    }

    const handleFcPSSlider = (val) => {
        setFcSliderPSVal(val)

        dispatch(set_params({
            ...params,
            articlesNum: FcSliderPSVal
        }))
    }

    const getProductGroup = (val) => {
        console.log(val);

        setProductGroupItem(val)
        setProductNameItem({})
        setYlItem({})
        console.log(productGroupItem,'---');

        dispatch(set_params({
            ...params,
            groupId: '',
            profitModelId: ''
        }))

        setOpenProductGroup(false)
        productRefetch()
    }

    const getProductName = (val) => {
        setProductNameItem(val)
        setYlItem({})
        setOpenProduct(false)
        getProfitModelInfoFun(val.id)

        dispatch(set_params({
            ...params,
            groupId: val.id,
            profitModelId: ''
        }))
    }

    const getProductYL = (val) => {
        dispatch(set_params({
            ...params,
            profitModelId: val.id
        }))
        setYlItem(val)
        setOpenProductYL(false)
    }

    const handleBwTextChange = (val) => {
        setBwText(val)
        dispatch(set_params({
           ...params,
            text: val
        }))
    }

    // useEffect(() => {
    //     handleBigMenu(list[0])
    // }, []);

    function handleTextType(item): void {
        console.log(item);
        setTextTypeId(item.label)
        setZdyList(item?.list || [])
        let id = [item?.list[0]?.id]
        setSelectedItems([id])

        dispatch(set_params({
            ...params,
            templateId: id.toString()
        }))
    }

    function handleBanBenType(item: { name: string; id: number; }): void {
        setBanBenTypeId(item.id)

        dispatch(set_params({
            ...params,
            templateId: zdyList[0]?.id.toString()
        }))
    }

    function handleSelectItem(id: number) {
        // let list = JSON.parse(JSON.stringify(selectedItems))
        if (selectedItems.includes(id)) {
            setSelectedItems(selectedItems.filter(item => item !== id));
        } else {
            setSelectedItems([...selectedItems, id]);
        }

        dispatch(set_params({
            ...params,
            templateId: selectedItems.toString()
        }))
    }

    function isSelected(id) {
        return selectedItems.includes(id)
    }

    const focusTextInput = () => {
        setColors(['rgba(51,77,176,1)', 'rgba(198,94,253,1)'])
    }
    const blurTextInput = () => {
        setColors(['white', 'white'])
    }

    async function uploadFile() {
        let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

        if (permissionResult.granted === false) {
            alert('Permission to access gallery is required!');
            return;
        }
        let pickerResult = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Videos,
            // allowsMultipleSelection: true, //可以在相册中选择多个图片或视频
            // mediaTypes: ImagePicker.MediaTypeOptions.All, // 选择图片或视频都可以
            allowsEditing: true, // 可选，允许用户编辑所选图片或视频。
            // aspect: [4, 3], // 可选，设置选择的图片或视频的宽高比。
            quality: 1, // 可选，设置图片或视频的质量。0到1之间。1表示最高质量。
        });
        if (!pickerResult.canceled) {
            setFileUrl(pickerResult?.assets[0]?.uri)
            ossRefetch()
        }
    }

    const handleProductGroup = () => {
        setGroupSearchText('')
        setOpenProductGroup(true)
        groupRefetch()
    }

    const handleProdut = () => {
        setProductSearchText('')
        setOpenProduct(true)
        productRefetch()
    }

    function handleSelect(){
        if(remember) {
            setRemember(false)
            dispatch(set_params({
                ...params,
                remember: false,
                groupId: '',
                profitModelId: ''
            }))
        } else {
            setRemember(true)
            dispatch(set_params({
                ...params,
                remember: true,
            }))
        }

    }

    // @ts-ignore
    return (
        <FcView style={styles.container}>
            <FormTitle style={{paddingHorizontal: 12}} isLeftIcon title={title || '输入爆文原文'}/>
            <View style={{marginHorizontal: 12}}>
                <TextInput
                    style={[styles.bw_txt, {height: 200}]}
                    multiline={true}
                    // numberOfLines={4}
                    onChangeText={handleBwTextChange}
                    value={bwText}
                    placeholderTextColor={'rgba(0, 0, 0, 0.3)'}
                    placeholder={'输入/粘贴你的视频文案'}
                />
                {isLoading && <Loading style={styles.input_loading} iconStyle={{width: 40, height: 40}} text={'文案获取中'}></Loading>}
            </View>

            {isVideoBtn &&
                <View style={styles.video_btn_wrap}>
                    <TouchableOpacity style={styles.video_btn} onPress={() => setIsGetVideoLink(true)}>
                        <Text style={styles.video_icon}>&#xe601;</Text>
                        <Text style={styles.video_txt}>视频链接获取</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.video_btn} onPress={() => uploadFile()}>
                        <Text style={styles.video_icon}>&#xe61b;</Text>
                        <Text style={styles.video_txt}>视频获取</Text>
                    </TouchableOpacity>
                </View>
            }

            <TouchableOpacity style={styles.remember_psd} onPress={() => handleSelect()}>
                {remember &&
                    <LinearGradient
                        colors={['#6989FF', '#C65EFD']}
                        start={{x: 0, y: 0}}
                        end={{x: 1, y: 1}}
                        style={styles.remember_psd_icon}
                    >
                        <Text style={[styles.input_icon, {color: 'white'}]}>&#xe64d;</Text>
                    </LinearGradient>
                }
                {!remember && <View style={styles.select_box}></View>}
                <Text style={styles.remember_psd_txt}>选择关联产品</Text>
            </TouchableOpacity>

            {remember &&
                <>
                    <FormTitle style={{paddingHorizontal: 12}} isLeftIcon title='选私有库关联产品'
                               titleHint='选择的产品会关联私有资料库'/>
                    <Flex wrap='wrap' style={styles.big_menu}>
                        {typeList?.map((item, index) =>
                            <FcButton
                                key={index}
                                onClick={() => handleProduct(item)}
                                type={typeId === item.id ? 'txtBK' : 'default'}
                                style={[styles.big_menu_item]}
                                itemStyle={{width: '100%', height: '100%'}}
                                textName={item.name} borderWidth={1}></FcButton>
                        )}
                    </Flex>

                    <View style={{paddingHorizontal: 12}}>
                        <FormTitle style={{marginTop: 8}} title='选产品分组' titleHint={'*'}
                                   titleHintStyle={styles.hint}/>
                        <TouchableOpacity onPress={() => handleProductGroup(true)}>
                            <View style={styles.item_wrap}>
                                <Text
                                    style={[productGroupItem.name ? styles.item_label : styles.item_hint]}>{productGroupItem.name || '请选择'}</Text>
                                <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe609;</Text>
                            </View>
                        </TouchableOpacity>

                        <FormTitle style={{marginTop: 8}} title='选产品名称' titleHint={'*'}
                                   titleHintStyle={styles.hint}/>
                        <TouchableOpacity onPress={() => handleProdut()}>
                            <View style={styles.item_wrap}>
                                <Text
                                    style={[productNameItem.name ? styles.item_label : styles.item_hint]}>{productNameItem.name || '请选择'}</Text>
                                <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe609;</Text>
                            </View>
                        </TouchableOpacity>

                        <FormTitle style={{marginTop: 8}} title='选盈利模式' titleHint={'*'}
                                   titleHintStyle={styles.hint}/>
                        <TouchableOpacity onPress={() => setOpenProductYL(true)}>
                            <View style={styles.item_wrap}>
                                <Text style={[ylItem.typeName ? styles.item_label : styles.item_hint]}>{ylItem.typeName || '请选择'}</Text>
                                <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe609;</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </>
            }

            <FormTitle style={{paddingHorizontal: 12, marginTop: 12}} isLeftIcon title='选文案类型'/>
            <Flex wrap='wrap' style={styles.big_menu}>
                {textTypeList?.map((item, index) =>
                    <View style={styles.big_menu_item_box}>
                        <FcButton
                            key={index}
                            onClick={() => handleTextType(item)}
                            type={textTypeId === item.label ? 'txtBK' : 'default'}
                            style={[styles.big_menu_item]}
                            itemStyle={{width: '100%', height: '100%'}}
                            textName={item.label} borderWidth={1}></FcButton>
                    </View>
                )}
            </Flex>
            <FormTitle style={{paddingHorizontal: 12}} isLeftIcon title='选版本类型'/>
            <Flex wrap='wrap' style={styles.big_menu}>
                {banBenTypeList?.map((item, index) =>
                    <View style={styles.big_menu_item_box}>
                        <FcButton
                            key={index}
                            onClick={() => handleBanBenType(item)}
                            type={banBenTypeId === item.id ? 'txtBK' : 'default'}
                            style={[styles.big_menu_item]}
                            itemStyle={{width: '100%', height: '100%'}}
                            textName={item.name} borderWidth={1}></FcButton>
                    </View>
                )}
            </Flex>

            {
                banBenTypeId === 2 && <>
                    <View style={styles.small_menu}></View>

                    <View style={styles.list_wrap}>
                        {zdyList.map((item, index) => (
                            <TouchableOpacity style={[styles.list_item_wrap,isSelected(item.id) && styles.list_active]} onPress={() => handleSelectItem(item.id)} key={index}>
                                <Text style={[styles.list_item, isSelected(item.id) && styles.list_active]}>{item.name}</Text>
                            </TouchableOpacity>
                        ))}
                    </View>
                </>
            }



            <View style={{paddingHorizontal: 12}}>

                <FormTitle title='单篇字数'
                           style={{marginBottom: 8, marginTop: 4}}
                           right={
                               <View style={styles.slider_wrap}>
                                   <TextInput style={styles.slider_input} value={FcSliderZSVal + ''}></TextInput>
                                   <Text style={styles.slider_txt}>个</Text>
                               </View>
                           }/>
                <FcSlider value={FcSliderZSVal} showMinMax min={100} max={500} onFcSlider={handleFcZSSlider}/>

                <FormTitle title='输出篇数'
                           style={{marginBottom: 8, paddingTop: 32}}
                           right={
                               <View style={styles.slider_wrap}>
                                   <TextInput style={styles.slider_input} value={FcSliderPSVal + ''}></TextInput>
                                   <Text style={styles.slider_txt}>个</Text>
                               </View>
                           }/>
                <FcSlider value={FcSliderPSVal} min={1} showMinMax onFcSlider={handleFcPSSlider}/>
            </View>

            <FcModal
                isOpen={openProductGroup}
                onFcModalClose={() => setOpenProductGroup(false)}
                titleText='选择产品分组'
                header={<FcSearch searchText={groupSearchText} onSearch={(val) => setGroupSearchText(val)}/>}
                titleBottomBorderWidth={0}
            >
                <View>
                    {groupList.map((item, index) => (
                        <TouchableOpacity key={index}
                                          activeOpacity={1}
                                          style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                          onPress={() => getProductGroup(item)}
                                          onPressIn={() => setPressedIndex(index)}
                                          onPressOut={() => setPressedIndex(-1)}
                        >
                            <Text numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                        </TouchableOpacity>
                    ))}
                    {groupList?.length <= 0 &&
                        <View style={{
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingTop: 60,
                            paddingBottom: 120
                        }}>
                            <NoData hintText='暂无分组'/>
                        </View>
                    }
                </View>
            </FcModal>
            <FcModal
                isOpen={openProduct}
                onFcModalClose={() => setOpenProduct(false)}
                titleText='选择产品名称'
                header={<FcSearch searchText={productSearchText} onSearch={(val) => setProductSearchText(val)}/>}
                titleBottomBorderWidth={0}
            >
                <View>
                    {productList.map((item, index) => (
                        <TouchableOpacity key={index}
                                          activeOpacity={1}
                                          style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                          onPress={() => getProductName(item)}
                                          onPressIn={() => setPressedIndex(index)}
                                          onPressOut={() => setPressedIndex(-1)}
                        >
                            <Text numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                        </TouchableOpacity>
                    ))}
                </View>
            </FcModal>
            <FcModal
                isOpen={openProductYL}
                onFcModalClose={() => setOpenProductYL(false)}
                titleText='选择盈利模式'
                titleBottomBorderWidth={0}
            >
                <View>
                    {ylList.map((item, index) => (
                        <TouchableOpacity key={index}
                                          activeOpacity={1}
                                          style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                          onPress={() => getProductYL(item)}
                                          onPressIn={() => setPressedIndex(index)}
                                          onPressOut={() => setPressedIndex(-1)}
                        >
                            <Text numberOfLines={1} ellipsizeMode="tail">{item.typeName}</Text>
                        </TouchableOpacity>
                    ))}
                    {ylList?.length<=0 &&
                        <View style={{flexDirection: 'column',alignItems: 'center',justifyContent: 'center',paddingTop: 30,paddingBottom: 60}}>
                            <NoData hintText='暂无盈利模式资料' />
                            <FcButton
                                onClick={() => router.navigate(`/aiFeeding`)}
                                type='BjJB'
                                colors={['#6989FF','#C65EFD']}
                                style={{width: 144,height: 32,justifyContent: 'center'}}
                                itemStyle={{borderRadius: 8}}
                                textName='去私有化资料新增'></FcButton>
                        </View>
                    }
                </View>
            </FcModal>

            <FcModal
                isOpen={isGetVideoLink}
                onFcModalClose={() => setIsGetVideoLink(false)}
                titleText='视频链接获取'
            >
                <View>
                    <LinearGradient
                        colors={colors} // 渐变色
                        start={{x: 0, y: 0}}
                        end={{x: 1, y: 1}}
                        style={styles.gradient}
                    >
                        <TextInput
                            style={styles.video_link}
                            multiline={true}
                            // numberOfLines={4}
                            value={videoLink}
                            placeholderTextColor={'rgba(0, 0, 0, 0.3)'}
                            placeholder={'粘贴短视频网址即可提取文案 '}
                            underlineColorAndroid="transparent" // 设置安卓下的下划线颜色为透明
                            selectionColor="transparent" // 设置选中时的颜色为透明
                            onFocus={focusTextInput}
                            onBlur={blurTextInput}
                            onChangeText={setVideoLink}
                        />
                        {videoLink &&
                            <TouchableOpacity style={styles.close} onPress={() => setVideoLink('')}>
                                <Text style={{fontFamily: 'FcIconFont', fontSize: 12, color: 'white'}}>&#xe61a;</Text>
                            </TouchableOpacity>
                        }
                    </LinearGradient>

                    <View style={{
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        paddingBottom: 24
                    }}>
                        <FcButton
                            onClick={() => handleVideoLink()}
                            type='BjJB'
                            colors={videoLink? ['#6989FF', '#C65EFD']: ['rgba(105,137,255,0.4)','rgba(198,94,253,0.4)']}
                            style={{width: 168, height: 40, justifyContent: 'center'}}
                            itemStyle={{borderRadius: 8}}
                            textName='开始提取'></FcButton>
                    </View>


                </View>
            </FcModal>
        </FcView>
    )
}

export default aiInnovationWrap

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderRadius: 8,
        paddingBottom: 16,
    },
    bw_txt: {
        backgroundColor: '#F1F2F4',
        color: 'rgba(0,0,0,0.9)',
        fontSize: 17,
        lineHeight: 26,
        paddingVertical: 8,
        paddingHorizontal: 12,
        borderRadius: 8,
        textAlignVertical: 'top',
    },
    video_btn_wrap: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 12,
        paddingVertical: 12,
        borderBottomWidth: 0.5,
        borderBottomColor: 'rgba(0, 0, 0, 0.1)',

    },
    video_btn: {
        flexDirection: 'row',
        alignItems: "center",
        backgroundColor: '#F1F2F4',
        paddingHorizontal: 8,
        paddingVertical: 5,
        borderRadius: 8,
        marginRight: 6,
    },
    video_icon: {
        fontFamily: 'FcIconFont',
        color: 'rgba(0, 0, 0, 0.9)',
        fontSize: 12,
    },
    video_txt: {
        color: 'rgba(0, 0, 0, 0.9)',
        fontSize: 12,
        marginLeft: 2
    },
    big_menu: {
        paddingHorizontal: 8,
        display: "flex",
        flexWrap: "wrap",
        flexDirection: "row",
    },
    big_menu_item_box: {
        width: '33.33%',
        height: 40,
        marginBottom: 8
    },
    big_menu_item: {
        height: 40,
        lineHeight: 40,
        borderRadius: 8,
        marginHorizontal: 4,
        flex: 1,
    },
    small_menu: {
        paddingTop: 12,
        borderStyle: 'dashed',
        borderTopWidth: 1,
        borderColor: 'rgba(0, 0, 0, 0.1)',
        marginHorizontal: 16,
        marginTop: 12
    },
    small_menu_item: {
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 20,
        backgroundColor: '#F1F2F4',
        marginHorizontal: 8,
        marginBottom: 8,
        color: '#79797A'
    },
    small_menu_active: {
        color: '#2856FF',
        backgroundColor: 'rgba(40, 86, 255, 0.1)'
    },
    input_wrap: {
        flexDirection: 'row',
        alignItems: "center",
        height: 56,
        borderRadius: 10,
        paddingHorizontal: 12,
        backgroundColor: '#F1F2F4',
        marginBottom: 16
    },
    input_label: {
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)',
        flexDirection: 'row',
        alignItems: "center",
        marginRight: 10
    },
    input_val: {
        fontSize: 17,
        color: 'rgba(0,0,0,0.3)',
        flex: 1,
        height: '100%'
    },
    slider_wrap: {
        flexDirection: "row",
        alignItems: "center",
    },
    slider_input: {
        width: 56,
        height: 32,
        textAlign: "center",
        borderRadius: 8,
        backgroundColor: '#F1F2F4'
    },
    slider_txt: {
        marginLeft: 8,
        fontSize: 14,
        color: 'rgba(0,0,0,0.5)'
    },

    item_wrap: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: 'space-between',
        height: 56,
        paddingHorizontal: 12,
        backgroundColor: '#F1F2F4',
        borderRadius: 8
    },
    item_label: {
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)'
    },
    item_hint: {
        fontSize: 17,
        color: 'rgba(0,0,0,0.3)'
    },
    modal_item_text: {
        marginHorizontal: 16,
        height: 56,
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomColor: 'rgba(0,0,0,0.05)',
        borderBottomWidth: 1,
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)'
    },
    modal_item_pressed: {
        backgroundColor: 'rgba(0,0,0,0.05)'
    },
    list_wrap: {
        flexDirection: "row",
        flexWrap: "wrap",
        paddingHorizontal: 6,
        marginTop: 2
    },
    list_item_wrap:{
        height: 28,
        borderRadius: 8,
        backgroundColor: '#F1F2F4',
        display: 'flex',
        alignItems: "center",
        justifyContent: "center",
        marginHorizontal: 3,
        marginTop: 8,
        lineHeight: 18,
        paddingHorizontal: 10
    },
    list_item: {
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.5)'
    },
    list_active: {
        backgroundColor: '#E0EAFF',
        color: '#2856FF'
    },

    gradient: {
        // flex: 1,
        height: 82,
        margin: 16,
        borderRadius: 9,
        overflow: "hidden",
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: 1,
        position: "relative"
    },
    video_link: {
        width: '100%',
        paddingHorizontal: 12,
        height: 80,
        borderRadius: 9,
        overflow: "hidden",
        flexDirection: "row",
        alignItems: "center",
        marginHorizontal: 37,
        backgroundColor: '#F1F2F4',
        color: 'rgba(0,0,0,0.9)',
        fontSize: 17,
        lineHeight: 26,
        paddingVertical: 8,
        borderWidth: 0, // 去掉边框
        outlineWidth: 0, // 去掉轮廓
        shadowOpacity: 0, // 去掉阴影
    },
    close: {
        width: 16,
        height: 16,
        borderRadius: '50%',
        backgroundColor: 'black',
        justifyContent: "center",
        alignItems: "center",
        position: "absolute",
        right: 10,
        top: 10,
        zIndex: 100
    },
    remember_psd: {
        display: 'flex',
        alignItems: "center",
        flexDirection: "row",
        marginTop: 18,
        marginHorizontal: 12,
    },
    select_box: {
        width: 16,
        height: 16,
        borderRadius: 2,
        borderWidth: 0.5,
        borderColor: 'rgba(0, 0, 0, 0.3)'
    },
    remember_psd_txt: {
        marginLeft: 7,
        fontSize: 15,
        color: '#3D3D3D',
        fontWeight: 500
    },
    remember_psd_icon: {
        width: 16,
        height: 16,
        borderRadius: 2,
        display: 'flex',
        alignItems: "center",
        justifyContent: 'center'
    },
    input_icon: {
        fontFamily: 'FcIconFont',
        fontSize: 14,
        color: '#7A7A7A'
    },
    hint: {
        color: '#FA5151', fontSize: 14, marginLeft: 3
    },
    input_loading: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(238, 238, 238, 0.8)'
    }
})